<template>
  <div class="body">
    <header class="nav" id="headerTop">
      <div class="container">
        <div class="nav-box">
          <ul>
            <div class="logo" @click="tohome">
              <img src="./components/images/logo.png" alt="" />
            </div>
            <li>
              <div class="home">
                <RouterLink to="/home" id="parentIframe"
                  >首页<i @click="toggleShopShow"></i></RouterLink
                >
              </div>
              <div class="home2" v-show="shopShow">
                <ul>
                  <li><a href="#" class="active" @click="tochannel">电影</a></li>
                  <li><a href="#" @click="tochannel">动作</a></li>
                  <li><a href="#" @click="tochannel">冒险</a></li>
                  <li><a href="#" @click="tochannel">喜剧</a></li>
                  <li><a href="#" @click="tochannel">剧情</a></li>
                  <li><a href="#" @click="tochannel">幻想</a></li>
                  <li><a href="#" @click="tochannel">恐怖</a></li>
                  <li><a href="#" @click="tochannel">爱情</a></li>
                  <li><a href="#" @click="tochannel">战争</a></li>
                  <li><a href="#" @click="tochannel">悬疑</a></li>
                  <li><a href="#" @click="tochannel">惊悚</a></li>
                  <li><a href="#" @click="tochannel">战争</a></li>
                </ul>
              </div>
            </li>
            <li><RouterLink to="/channel">频道</RouterLink></li>
            <div class="search">
              <input type="search" v-model="search" class="texta" placeholder="大侦探" />
              <button class="button">全网搜</button>
            </div>
            <li class="login"><RouterLink to="/about">登录</RouterLink></li>
          </ul>
        </div>
      </div>
    </header>
    <RouterView />
  </div>
</template>
<script>
export default {
  data() {
    return {
      shopShow: false, //默认内容不显示
      search: ''
    }
  },
  methods: {
    toggleShopShow() {
      this.shopShow = !this.shopShow //使false变为true显示
    },
    tochannel() {
      this.$router.push({
        path: '/channel'
      })
    },
    tohome() {
      this.$router.push({
        path: '/home'
      })
    }
  }
}

window.addEventListener('scroll', function () {
  //获取元素
  var header = document.querySelector('header') //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
  // 添加类
  header.classList.toggle('sticky', window.scrollY > 0)
})
setTimeout(function () {
  // IE
  if (document.all) {
    document.getElementById('parentIframe').click()
  }
  // 其它浏览器
  else {
    var e = document.createEvent('MouseEvents')
    e.initEvent('click', true, true)
    document.getElementById('parentIframe').dispatchEvent(e)
  }
}, 0)
</script>
  <style scoped>
.nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  /* background-color: #2f2f37; */
  z-index: 1000;
}

#headerTop.sticky {
  background-color: #2f2f37;
}

.nav-box {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  margin-top: 20px;
  width: 12%;
}
.logo img {
  width: 100%;
}
.nav-box ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-box ul li {
  float: left;
}

.nav-box li a {
  color: #e0e0e0;
  font-weight: 600;
}

.home2 {
  position: absolute;
  top: 60px;
  left: 240px;
  padding: 5px 20px;
  width: 300px;
  height: 150px;
  background-color: #555555;
}
.home2 ul {
  width: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  flex-flow: row wrap;
}

.home2 ul li {
  width: 40px;
}

.home2 li .active {
  font-size: 17px;
  color: #ff5f00;
}

.home2 li a:hover {
  color: #ff5f00;
}

.search {
  float: left;
  position: relative;
  display: flex;
  width: 50%;
  line-height: 60px;
}

.search input {
  width: 100%;
  height: 40px;
  border-radius: 40px;
  padding: 0 20px;
  border: none;
  background-color: #444349a2;
  color: #ffffff69;
}
.search input::placeholder {
  color: #ffffff69;
}
.search .button {
  position: absolute;
  right: 0;
  width: 30%;
  height: 100%;
  border-radius: 40px;
  border: none;
  background-color: #ff5f00;
  color: #fff;
}
.login {
  float: right;
}
</style>